<template>
    <el-dialog v-model="props.isShow" title="设置角色" draggable :before-close="beforeClose" :show-close="false" :center="true"
        style="width: 350px;height: 300px;">
        <el-select v-model="optionValue" multiple placeholder="Select" style="width: 240px;">
            <el-option v-for="item in options" :key="item.Id" :label="item.RoleName" :value="item.Id" />
        </el-select>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">Cancel</el-button>
                <el-button type="primary" @click="save">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Role from "../../../class/Role";
import { getRoles, getUserRoleRelations, settingUserRole } from "../../../http";
const optionValue = ref()
const options = ref<Array<Role>>([])
const props = defineProps({
    isShow: Boolean,
    uid: String
})
const parms = ref({
    UserName: "",
    Description: "",
    PageIndex: 1,
    PageSize: 10
})
onMounted(async () => {
    options.value = (await getRoles(parms.value) as any).Data as Array<Role>
})
watch(() => props.uid, async (newid: any) => {
    if (newid && newid != '') {
        var optionSelectedList = await getUserRoleRelations(newid)
        optionValue.value = optionSelectedList
    } else {
        optionValue.value = []
    }
})
const emits = defineEmits(["closeSetting", "saveSetting"])
const close = () => {
    emits("closeSetting")
}
const save = async () => {
    let roleIds = optionValue.value
    let res = (await settingUserRole(props.uid, roleIds) as any) as boolean
    if (res) {
        ElMessage.success("修改成功！")
        emits("saveSetting")
    }
}
const beforeClose = (done: any) => {
    emits("closeSetting")
    done(); // 关闭对话框  
}
</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
  